<style>
body{
padding:0;
margin:0;
max-width: 56.25vh;
margin-left:auto;
margin-right:auto;
overflow:hidden;
height:100vh;
position:relative;
}
#McCircle {
  cx: 500px;
  cy: 500px;
  r: 300px;
  fill: none;
  stroke: white;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  box-shadow: 0 0 0 3px #d10063;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff)
    drop-shadow(0 0 10px #fff);
  animation: glow 1s infinite alternate;
}
#McOrbit {
  cx: 500px;
  cy: 200px;
  r: 1vh;
  fill: white;
  stroke: white;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  box-shadow: 0 0 0 3px #000000;
  filter: drop-shadow(0 0 20px #fff);
}

#number{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
padding-top:30px;


}

#rotate {
  transform-origin: 50% 50%;
  animation: rotation 3s infinite linear;
}
@keyframes glow {
  from {
    filter: drop-shadow(0 0 4px #fff);
  }
  to {
    filter: drop-shadow(0 0 20px #fff);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


.sparkles {
  position: absolute;
  top: 0;
	width:100vw;
	height:100vh;
	  z-index: 0;
}
@media (min-width: 700px) {
  .sparkles {
     
  }
}

.sparkle {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: block;
  height: 30px;
  width: 30px;
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  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  animation-name: sparkle;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0;
}

.sparkle--small {
  height: 75px;
  width: 75px;
}

.sparkle--left {
  animation-name: sparkleLeft;
}

@keyframes sparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  3% {
    transform: scale(1) rotate(15deg);
    opacity: 0.8;
  }
  6% {
    transform: scale(1) rotate(15deg);
    opacity: 0.8;
  }
  9% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
}
@keyframes sparkleLeft {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  3% {
    transform: scale(1) rotate(-15deg);
    opacity: 0.8;
  }
  6% {
    transform: scale(1) rotate(-15deg);
    opacity: 0.8;
  }
  9% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
}

.section--sparkles {
  min-height: 400px;
  width: 100%;
}


</style>
</head>
<body translate="no" >
  <svg id="circle" width="100%" height="100vh" viewbox="0 0 1000 1000">
   <defs>
    <path id="title" d="M0,300 Q500,0 1000,300" />
  </defs>
  <g id="rotate">
    <circle id="McCircle" />
    <circle id="McOrbit" />
  </g>
 
</svg>


  <svg id="number" width="100%" height="100vh" viewbox="0 0 1000 1000">
  <g>
  <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i");
  </style>
   <text id="mytxt" x="50%" y="50%" font-family="Roboto Condensed" transform="translate(0, 0.35em)" fill="#ffffff" alignment-baseline="middle" dominant-baseline="middle" font-size="300" stroke-width="30" stroke="#ffffff55" text-anchor="middle">70</text>
  </g>
</svg>


 

 <section class="section section--sparkles">
  <div class="sparkles"></div>
 
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
    var myparam="";
	if(myparam.length>0){
	  $('#mytxt').html(myparam);
	}
	
	
	var sparkleTime = function ($) {

  var $container = $('.sparkles'),
  $sparkle = $('<div class="sparkle"></div>'),
  totalSparkles,
  sparkleDelayRange = 10;

  if (window.matchMedia('(max-width: 730px)').matches) {
    totalSparkles = 30;
  } else {
    totalSparkles = 100;
  }

  function init() {
    sprinkleSparkles();
  }

  function sprinkleSparkles() {
    for (var i = 0; i < totalSparkles; i++) { 
      var size = i % 2 === 0 ? 'sparkle--small' : '';
      var direction = i % 3 === 0 ? 'sparkle--left' : '';
      $sparkle.
      clone().
      css({
        top: Math.random() * 100 + '%',
        left: Math.random() * 100 + '%',
        webkitAnimationDelay: Math.random() * sparkleDelayRange + 's',
        AnimationDelay: Math.random() * sparkleDelayRange + 's' }).

      addClass(size).
      addClass(direction).
      appendTo($container);
    } 
  }

  return {
    init: init };

}(jQuery);

sparkleTime.init();

</script>